<template>
  <div>
    <van-nav-bar title="商品列表" />
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      v-for="item in 10"
      :key="item"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="show = !show">添加到购物车</van-button>
      </template>
    </van-card>
    <van-popup v-model="show" position="bottom" closeable>
      <div>
        <div>请输入地址</div>
        <van-form @submit="onSubmit">
          <van-field
          style="margin-top:20px"
            v-model="username"
            name="用户名"
            label="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "product",
  data() {
    return {
      show: false,
        username: '',
      password: '',
    };
  },
  methods:{
      onSubmit(values) {
      console.log('submit', values);
    },
  },
};
</script>

<style>
</style>